<template>
  <div class="optionsConfig">
    <DividerTile title="选项" :isShow.sync="isShow"></DividerTile>
    <el-form size="small" v-show="isShow">
      <el-form-item>
        <div class="flex">
          <div class="fontWeight itemTitle">数据来源</div>
          <el-radio-group v-model="activeFormData.optionsSource" @change="valueChange($event, 'optionsSource')">
            <el-radio label="0">自定义</el-radio>
            <el-radio label="1">接口</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <template v-if="activeFormData.optionsSource === '0'">
        <draggable v-model="optoinsList" handle=".mover" :animation="340" ghostClass="ghost" chosenClass="chosen">
          <el-form-item v-for="(item, index) in optoinsList" :key="index">
            <div class="rowItem">
              <div class="el-icon-s-operation drag mover"></div>
              <div class="optionName">
                <el-input v-model="item.label" placeholder="选项名"></el-input>
              </div>
              <div class="optionValue">
                <el-input v-model="item.value" placeholder="选项值"></el-input>
              </div>
              <div class="el-icon-remove-outline del" @click="delClick(index)"></div>
            </div>
          </el-form-item>
        </draggable>
        <div>
          <el-link type="primary" :underline="false" @click="addOptionClick">
            <i class="el-icon-circle-plus-outline"></i>
            添加选项
          </el-link>
        </div>
      </template>
      <template v-else>
        <el-form-item>
          <div class="flex">
            <div class="fontWeight itemTitle">URL</div>
            <el-input class="flex-1" clearable v-model="activeFormData.urlData.urlSource" placeholder="请输入相对路径"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="flex">
            <div class="fontWeight itemTitle flex1"></div>
            <el-button type="primary" plain @click="updateUrlClick">更新URL地址</el-button>
          </div>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import DividerTile from '../../dividerTile'
import { mapState, mapMutations } from 'vuex'
import { getUrlOptions } from '@/api/tool/insure'
import draggable from 'vuedraggable'
export default {
  name: 'optionsConfig',
  components: {
    DividerTile,
    draggable
  },
  data() {
    return {
      isShow: true
    }
  },
  computed: {
    ...mapState('pageData', ['activeFormData']),
    optoinsList: {
      get() {
        return this.activeFormData?.options
      },
      set(value) {
        this.SETPROP({
          key: 'options',
          value
        })
      }
    }
  },
  methods: {
    ...mapMutations('pageData', ['DELOPTION', 'ADDOPTION', 'SETPROP']),
    delClick(index) {
      this.DELOPTION(index)
    },
    addOptionClick() {
      this.ADDOPTION()
    },
    valueChange(value, key) {
      this.SETPROP({
        value,
        key
      })
      // 默认值需要置空
      this.SETPROP({
        key: 'vModel',
        value: ''
      })

      // 数据联动里面显示值也需要置空
    },
    updateUrlClick() {
      this._getUrlOptions()
    },
    async _getUrlOptions() {
      const url = this.activeFormData.urlData.urlSource
      const res = await getUrlOptions(url)
      const urlData = {
        urlOptions: res.data,
        urlSource: url
      }
      // if (res) {
      this.SETPROP({
        key: 'urlData',
        value: urlData
      })
      // }
      // 设置接口的options
    }
  }
}
</script>

<style lang="scss" scoped>
.optionsConfig {
  padding-right: 10px;
  .itemTitle {
    width: 90px;
    padding-right: 12px;
    text-align: right;
    color: #606266;
  }
  .rowItem {
    display: flex;
    .drag {
      font-size: 18px;
      line-height: 34px;
      cursor: all-scroll;
    }
    .del {
      font-size: 18px;
      line-height: 34px;
      color: red;
      cursor: pointer;
    }
    .optionName {
      margin: 0 5px;
    }
    .optionValue {
      margin: 0 5px;
    }
  }
  .el-radio-group {
    line-height: 32px;
    font-size: inherit;
  }
  .ghost {
    background: #61b3ff;
  }
  .chosen {
    background: #61b3ff;
    color: #fff;
  }
}
</style>
